<template>
    <!-- 主页 -->
    <van-nav-bar placeholder fixed>
        <template #left>
            <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" color="blue" size="2em"
                @click="user" />
        </template>
        <template #title>
            <!-- 搜索 -->
            <van-search v-model.trim="keyword" placeholder="关键词" shape="round" :clearable="false" show-action
                @click-left-icon="searchData" @search="searchData" autocomplete="off" />
        </template>
        <template #right>

            <!-- 历史记录 -->
            <van-icon name="play" :class="historyShow !== false ? 'play' : 'end'" size="2rem" @click="History" />
        </template>
    </van-nav-bar>
    <!-- 历史记录的浮窗 -->
    <van-popup v-model:show="historyShow" position="bottom" :style="{ height: '30%' }" round>
        <!-- 历史记录的内容 -->
        <template #default>
            <div style="padding:3vw;">
                <!-- 头部 标题和清空 -->
                <div class="header">
                    <div class="title">搜索历史</div>
                    <!-- 清空历史记录 按钮 -->
                    <van-icon name="delete-o" size="1.3rem" @click="clearHistory" />

                </div>
                <!-- 展示区 -->
                <div class="content">
                    <van-tag type="primary" round size="large" v-for="item in searchKeyword" :key="item"
                        @click="searchTag(item)">{{ item }}
                    </van-tag>
                </div>
            </div>
        </template>
    </van-popup>
    <!-- 用户登录 -->
    <van-popup v-model:show="userShow" position="bottom" :style="{ height: '30%' }" round>
        <!-- 头部 -->
        <div class="user-header" @click="picClick">
            <!-- 头像 -->
            <div class="pic">
                <img :src="picUrl" v-show="picUrl">
                <input type="file" hidden ref="uploadAvatorRef" accept=" image/jpeg" @change="unloadAvatorChange" />
            </div>
            <!-- 头像 -->

            <!-- 网名 -->
            <div class="nickname">
                <h5>个人中心</h5>
                <span>点击头像上传一个属于自己的头像吧！</span>
            </div>
            <!-- 网名 -->
        </div>
        <!-- 头部 -->

        <!-- 列表 -->
        <div class="demo" @click="logoff">
            <h6>同步头像</h6>
            <div v-show="picUrl === ''">未同步,点击头像同步</div>
            <div v-show="picUrl !== ''">已同步,点击注销</div>
        </div>
        <!-- 列表 -->
    </van-popup>

</template>

<script>
// 导入兄弟传参插件
import bus from "../EventBus"

export default {
    name: 'Headers',
    data() {
        return {
            // 查询的关键词
            keyword: '',
            // 是否展示历史记录界面
            historyShow: false,
            // 是否展示用户登录界面
            userShow: false,
            // 搜索的数据
            data: [],
            // 搜索历史记录数据
            searchKeyword: [],
            picUrl: '',
            picShow: false,
        }
    },
    mounted() {
        // 查看是否登录
        this.picUrl = localStorage.getItem('pic')
        // 每次dom元素加载后读取缓存中的数据获取上次最后一次的搜索结果
        this.searchKeyword = JSON.parse(localStorage.getItem('searchKeyword'))
        if (this.searchKeyword === null) return this.searchKeyword = []

    },
    methods: {
        // 展示历史记录
        History() {
            this.historyShow = !this.historyShow
        },
        // 是否展示用户登录
        user() {
            this.userShow = !this.userShow
        },

        // 搜索的数据
        async searchData() {
            // 不能为空
            if (this.keyword === '') return
            // 历史记录存在搜索词就不在添加
            if (this.searchKeyword.indexOf(this.keyword) === -1) {
                // 加入到搜索的历史记录中
                this.searchKeyword.push(this.keyword)
                // 缓存每次的搜索记录
                localStorage.setItem('searchKeyword', JSON.stringify(this.searchKeyword))
            }
            // 判断本地是否有数据
            if (localStorage.getItem(this.keyword)) {
                // 赋值后
                this.data = JSON.parse(localStorage.getItem(this.keyword))
                // 发送给内容区域渲染
                return bus.emit('songsRendering', this.data)
            }
            // 请求数据
            const { data } = await this.$http.get('/search', {
                params: {
                    keywords: this.keyword
                }
            })
            this.data = data.result.songs
            localStorage.setItem(this.keyword, JSON.stringify(data.result.songs))
            // 发送给内容区负责渲染
            bus.emit('songsRendering', this.data)


        },

        // 清空历史记录
        clearHistory() {
            this.searchKeyword = []
            this.keyword = ''
            localStorage.removeItem('searchKeyword')
            this.data = []
            this.$toast('历史记录已清空');
        },

        // 点击历史记录标签搜索
        searchTag(val) {
            this.keyword = val
            this.searchData()
        },

        // 点击头像上传
        picClick() {
            if (this.picUrl) return
            this.$refs.uploadAvatorRef.click()
        },

        // 触发上传
        unloadAvatorChange() {
            let reader = new FileReader()
            reader.readAsDataURL(this.$refs.uploadAvatorRef.files[0]);
            reader.onload = () => {
                this.picUrl = reader.result
                localStorage.setItem('pic', this.picUrl)
                this.$refs.uploadAvatorRef.value = "";
            }

        },
        // 注销账号
        logoff() {
            if (!this.picUrl) return alert('请先上传头像才可以注销噢')
            this.picUrl = ''
            localStorage.removeItem('pic')
            this.$toast('注销成功');
        }
    }
}
</script>

<style lang="less" scope>
// 展开历史记录
.play {
    transform: rotate(90deg);
}

// 关闭历史记录
.end {
    transform: rotate(-90deg);
}

.header {
    display: flex;
    justify-content: space-between;

    .title {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
    }

    i {
        width: 10px;
        height: 10px;
        vertical-align: middle;
        margin-right: 20px;
    }
}

.content {
    padding: .4rem;

    .van-tag--large {
        margin: .3rem;
    }
}

.user-header {
    display: flex;
    padding: 1rem;
    border-bottom: .2rem solid #f7f8fa;

    .pic {
        width: 4rem;
        height: 4rem;
        background-color: #eee;
        border-radius: 50%;

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;

        }
    }

    .nickname {
        display: flex;
        flex-direction: column;
        margin-left: 1rem;

        span {
            color: #999;
        }
    }
}

.demo {
    padding: 1rem 4rem;
    background-color: #f7f8fa;

    div {
        color: #999;
    }
}

.van-search {
    padding: 0;
}
</style>